<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="inp1">
    <span>-</span>
    <input type="text" id="inp2">
    <input type="button" value="=" id="btn">
    <input type="text" id="inp3">


    <script>

        // 1 找对象

        var obj1 = document.getElementById('inp1') ;
        console.log(obj1) ;  // 测试对象是否拿到
        var obj2 = document.getElementById('inp2') ;
        console.log(obj2) ;  // 测试对象是否拿到
        var obj3 = document.getElementById('btn') ;
        console.log(obj3) ;  // 测试对象是否拿到
        var obj4 = document.getElementById('inp3') ;
        console.log(obj4) ;  // 测试对象是否拿到



        // 2 绑定点击事件
        obj3.onclick = function() {
            // 测试点击事件是否绑定成功
            // alert(666) ;  
            // 3  拿到两个输入框的值
            var n1 = obj1.value ;
            var n2 = obj2.value ;
            // 测试   逗号隔开，可以打印多个值
            console.log(n1 , n2) ;

            // 4 计算
            var x = n1 - n2 ;
            // alert(x) ;

            // 5 把结果放入最后一个框里面
            obj4.value = x ;

        }



    </script>
    
</body>
</html>